<script setup lang="ts">
import { ref } from "vue";
import { RouterLink } from "vue-router";
const value = ref<string>("");

const onSearch = (searchValue: string) => {
  console.log("use value", searchValue);
  console.log("or use this.value", value.value);
};
</script>

<template>
  <div class="flex items-center justify-between h-full px-12">
    <div class="flex items-center w-auto skew-x-[-16deg]">
      <svg
        class="hidden w-10 h-12 lg:inline-block"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
       
      >
        <path
          d="M1009.066667 330.666667L556.8 12.8c-27.733333-17.066667-61.866667-17.066667-89.6 0L14.933333 330.666667c-8.533333 6.4-14.933333 14.933333-14.933333 27.733333 0 21.333333 23.466667 34.133333 40.533333 21.333333L64 362.666667v661.333333h64V317.866667L512 49.066667l384 268.8V1024h64V362.666667l23.466667 17.066666c17.066667 10.666667 40.533333-2.133333 40.533333-21.333333 0-10.666667-6.4-21.333333-14.933333-27.733333z"
          p-id="6755"
          fill="#1296db"
        ></path>
        <path
          d="M704 704h128v128h-128zM192 896h640v64H192zM192 768h448v64H192zM192 640h448v64H192zM192 512h448v64H192zM704 512h128v128h-128z"
          p-id="6756"
          fill="#1296db"
        ></path>
      </svg>
      <div class="pl-2 font-semibold text-[#4096dd] text-2xl">库存管理系统</div>
    </div>
    <div class="flex items-center w-[35%]">
      <a-input-search
        v-model:value="value"
        placeholder="查找工具..."
        enter-button="查找"
        class="pr-3"
        @search="onSearch"
      />
    </div>
    <RouterLink
      to="/about"
      class="flex items-center pl-2 text-sm font-medium transition-all h-2/3 hover:text-blue-300"
    >
      关于作者
    </RouterLink>
  </div>
</template>

<style scoped lang="scss"></style>
